<template>
  <div>
   <!-- 子传父
   1.把父组件数组里面的id,传入子组件
   2.子组件接收id
   3.子组件的按钮绑定点击事件,触发sum函数
   4.子组件sum函数触发的时候,触发this.$enit('事件名',id参数,参数,参数)方法 
   5.父组件里面绑定  子组件传入事件  ,触发price函数
   6.在methods 里面定义的price函数接收的的参数就是子组件this.$emit()方法传过来的参数
   7.根据传过来的id 找到父组件里面数组的当前元素 find()
   8.修改 proprice 
   注: 数据向下绑定: 在父组件中修改数据=>数据传入子组件-->

    <MyProduct
      v-for="itme in list"
      :key="itme.id"
      :title="itme.proname"
      :price='itme.proprice'
     
      :id="itme.id"
      @kanjia="price"
    ></MyProduct>
  </div>
</template>

<script>
import MyProduct from "./components/MyProduct";
export default {
  components: { MyProduct },
  data() {
    return {
      list: [
        { id: 1, proname: "超级好吃的棒棒糖", proprice: 18.8 },
        { id: 2, proname: "超级好吃的大鸡腿", proprice: 34.2 },
        { id: 3, proname: "超级无敌的冰激凌", proprice: 14.2 },
      ],
    };
  },
  methods: {
    price(num, id) {
    let itme= this.list.find((itme) => itme.id === id);
    itme.proprice-=num
    },
  },
};
</script>

<style>
</style>